<template>
  <div class="micro-map" >
    <div id="map" class="micro-map">
      <EchartsPanel v-show="showEchartsLayer" @close="closeMain('echarts')" ref="echarts_zw"></EchartsPanel>
      <TablePanel v-show="showMapTableLayer" @close="closeMain('table')" ref="table_zw"></TablePanel>
      <MapControl></MapControl>
      <SearchInfo v-show="showSearchInfoPanel"></SearchInfo>
      <DetailView v-if="showDetailViewLayer"></DetailView>
    </div>
  </div>
</template>

<script>
import sgisMapBase from "@/utils/map/sfgis.map.base.js";
import sgisLayerBase from "@/utils/map/sfgis.layer.base.js";
import sgisRegionBase from "@/utils/map/sfgis.region.base.js";
import mapTool from "@/utils/map/sfgis.map.tool.js";
import Layer from "@/utils/map/lib/main.js";
import MapControl from "./mapControl.vue";
import data from "./data/data.js";
import EchartsPanel from "./echartPanel.vue";
import TablePanel from "./tablePanel.vue";
import SearchInfo from "./searchInfo.vue";
import DetailView from "./detail/detailView.vue";
import { mapState, mapMutations } from "vuex";
import { debug } from "util";
export default {
  name: "Layer",
  props: [],
  data() {
    return {
      color1: "#409EFF",
      layers: [],
      selectlayer: "",
      map: ""
    };
  },
  components: { MapControl, EchartsPanel, TablePanel, SearchInfo, DetailView },
  mounted() {
    EventBus.$on(
      "changeSearchInfoPanelStatus",
      this.changeSearchInfoPanelStatus
    );
    this.loadMap(); // 添加地图底图
  },
  computed: {
    ...mapState({
      showMapTableLayer: state => state.micro.showMapTableLayer,
      showEchartsLayer: state => state.micro.showEchartsLayer,
      showSearchInfoPanel: state => state.micro.showSearchInfoPanel,
      showDetailViewLayer: state => state.micro.showDetailViewLayer
    })
  },
  methods: {
    ...mapMutations([
      "changeShowMapControl",
      "changeShowEchartsLayer",
      "changeShowMapTableLayer",
      "changeSearchInfoPanel"
    ]),
    loadMap() {
      sgisMapBase.init("map");
      sgisLayerBase.init(data.map);
      //初始化一下区划配置信息
      sgisRegionBase.regionCatalog.setRegionCatalogs(data.regioncatalogs.data);
    },
    closeMain(type) {
      if (type == "echarts") {
        this.$store.commit("changeShowEchartsLayer", false);
      } else if (type == "map") {
        this.$store.commit("changeShowMapControl", false);
      } else {
        this.$store.commit("changeShowMapTableLayer", false);
      }
    },
    changeSearchInfoPanelStatus() {
      if (this.showSearchInfoPanel) {
        this.$store.commit("changeSearchInfoPanel", false);
      } else {
        this.$store.commit("changeSearchInfoPanel", true);
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.micro-map {
  width: 100%;
  height: 100%;
  background: rgba(30, 84, 111, 0.7);
  // background:-webkit-gradient(linear, 0% 0%, 0% 20%,from(#1E546F), to(#1E546F));/*谷歌*/
}
</style>
<style rel="stylesheet/scss" lang="scss">
.marker-popup-searchInfo {
  z-index: 400;
  width: 500px;
  max-width: 500px !important;
  .mapboxgl-popup-content {
    padding: 0px;
    border-radius: 0;
    box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.15);
  }
  .mapboxgl-popup-close-button {
    font-size: 24px;
    color: #3498db;
  }
  .hidden {
    display: none;
  }
  .popupInfo {
    .title {
      font-size: 1.4rem;
      // border-bottom: 1px solid #ddd;
      font-weight: bold;
      color: #fff;
      height: 38px;
      background: rgba(39, 134, 158, 1);
      line-height: 38px;
      padding-left: 10px;
    }
  }
  .allInfo {
    font-size: 0.7em;
    margin: 0 7px;

    ul {
      li {
        line-height: 31px;
        border-bottom: 1px solid #28859f;
        padding-left: 5px;
      }
      li:nth-child(odd) {
        background: rgba(39, 134, 158, 0.5);
      }
    }
  }
  .defaultShowInfo {
    font-size: 12px;
    padding:7px;
    width:300px;
    ul {
      li {
        line-height: 1.4;
        // border-bottom: 1px solid #28859f;
        padding-left: 5px;
        list-style: none;
        margin-bottom: 9px;
        display: inline;
        width: 100%;
        float: left;
      }
      li:nth-child(odd) {
        // background: rgba(39, 134, 158, 0.5);
      }
    }
  }
  .popup-todo {
    cursor: pointer;
    color: #3498db;
    margin-top: 8px;
    text-align: right;
    padding: 10px;
    display: inline-block;
    float: left;
    padding-right: 20px;
    width: 300px;
    box-sizing: border-box;
    a {
      color: #2edaff;
      margin: 0 10px;
    }
    #showMore {
      float: right;
    }
  }
  .mapqueryInfo {
    display: inline-block;
    .radio-group {
      margin-top: 12px;
      margin-bottom: 6px;
    }
    input[type="text"] {
      width: 150px;
      float: left;
      height: 19px;
    }
    button {
      float: left;
    }
  }
  .marker-popup-build-map {
    ul {
      li {
        cursor: pointer;
      }
    }
  }

  .peripQueryView {
    width: auto;
    margin: 10px;
    box-sizing: border-box;
    display: inline-block;
    border: none;
    background: #228098;
    padding: 3px 6px;
    border-radius: 2px;
    position: relative;
    .checkboxcontent{
      display: inline-block;
      margin: 5px 0;
      label{
        float: left;
        margin-right: 3px;
      }
      button{
        float: left;
        border: 1px solid #2bccee;
        margin: 0 2px;
        background: none;
        color: #fff;
        border-radius: 2px;
        cursor: pointer;
      }
      button.active{
        background: #2bccee;
        color: #fff;
      }
    }
    .checkbox{
      display: inline-block;
      p{
        float: left;
      }
    }
    .searchcontent {
      display: inline-block;
      float: left;
      margin: 0 0 6px 0;
      label{
        float: left;
        margin-right: 3px;
      }
      input {
        background: none !important;
        border: 1px solid #2bccee;
        color: rgba(255, 255, 255, 0.8);
        border-radius: 2px;
        height: 25px;
        float: left;
      }
      input:hover {
        border: 1px solid #2bccee;
      }
      select {
        border: 1px solid #2bccee;
        background: none;
        color: rgba(255, 255, 255, 0.8);
        border-radius: 2px;
        height: 27px;
        float: left;
        margin: 0 5px;
        cursor: pointer;
        option[selected]{
            font-weight:bold;
            background: #2bccee;
        }
      }
      option{
        background: #27869e;
      }
      option:hover{
        background: #2bccee;
      }
      option[selected]{
            font-weight:bold;
            background: #2bccee;
        }
      button {
        border: none;
        background: #2bccee;
        color: rgba(255, 255, 255, 0.8);
        border-radius: 2px;
        height: 27px;
        padding: 0 10px;
        float: left;
        cursor: pointer;
      }
    }
    .idenlist{
      display: inline-block;
      position: absolute;
      left: 56px;
      top: 67px;
      background: #27869e;
      padding: 5px;
      border-radius: 2px;
      max-height: 250px;
      overflow: auto;
      min-width: 144px;
      li{
        list-style: none;
        cursor: pointer;
      }
      li:hover{
        color: #fff;
      }
    }
    .hidden{
      display: none;
    }
  }
  .peripQueryView.hidden{
    display: none;
  }
}
</style>
